<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>客户聊天界面</title>

    <link href="/after/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="/after/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="/after/css/animate.min.css" rel="stylesheet">
    <link href="/after/css/style.min.css?v=3.0.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div id="app">
    <div class="wrapper wrapper-content  animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">

                <div class="ibox chat-view">
                    <#assign str="123">
                    <div class="ibox-title">
                        聊天窗口
                    </div>

                    <div class="ibox-content">

                        <div class="row">

                            <div class="col-md-9 ">
                                <div class="chat-discussion">
                                    <center><a onclick="queryHistory()">查看历史聊天记录</a></center>

                                    <!--循环部分-->
                                    <div class="chat-message">
                                        <img class="message-avatar" src="/after/img/a1.jpg">
                                        <div class="message">
                                            <a class="message-author" href="#"> 客服"框框"</a>
                                            <span class="message-date"> {{new Date()}} </span>
                                            <span class="message-content">
											您好！我是本店客服"框框"，请问有什么可以帮助您的呢？
                                            </span>
                                        </div>
                                    </div>

                                    <!--使用vue遍历发送的消息-->
                                    <div class="chat-message" v-for="talk in talkList">
                                        <img class="message-avatar" src="/after/img/a1.jpg">
                                        <div class="message">
                                            <a class="message-author" href="#"> {{talk.adminName}}</a>
                                            <span class="message-date"> {{talk.createDate}} </span>
                                            <span class="message-content">
											{{talk.content}}
                                            </span>
                                        </div>
                                    </div>
                                    <div id="msg_end" style="height:0px; overflow:hidden;margin-bottom: 50px"></div>
                                </div>

                            </div>

                        </div>
                        <!--消息回复部分-->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="chat-message-form">
                                    <div class="form-group">
                                    <textarea class="form-control message-input" onkeypress="keySend()" name="text" id="text"
                                              placeholder="输入消息内容，按回车键发送"></textarea>
                                        <input type="button" value="发送" onclick="send()"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="/after/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/after/js/bootstrap.min.js?v=3.4.0" type="text/javascript"></script>
<script type="text/javascript" src="/after/js/Globals.js"></script>
<script type="text/javascript" src="/after/js/websocket.js"></script>
<script type="text/javascript" src="/after/js/vue/vue.min.js"></script>
<script src="/after/js/layer/layer.js" charset="utf-8"></script>

<script type="text/javascript">
    //选择聊天之前需要先登录
    if("${NowCustom}"=="" || "${NowCustom}"==null) {
        alert("请先登录后，再选择客服聊天");
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    var app = new Vue({
        el:'#app',
        data:{
            talkList:[],//聊天信息列
            friendsList:[]//历史聊天好友列
        }
    })

    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //将当前用户名放在申请注册中，在后台的onOpen方法中，使用键值对的方式保存websocket对象。
        websocket = new WebSocket("ws://10.0.93.181:8080/websocket/${NowCustom.name}");
    }
    else {
        alert("对不起！你的浏览器不支持webSocket")
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        setMessageInnerHTML("<center>加入连接</center>");
        queryFriends();
    };

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        app.talkList.push(JSON.parse(event.data));
        msg_end.scrollIntoView();
        //setMessageInnerHTML(JSON.parse(event.data));
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("断开连接");
    };

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，
    //            防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        var is = confirm("确定关闭窗口？");
        if (is) {
            websocket.close();
        }
    };

    //显示系统信息
    function setMessageInnerHTML(innerHTML) {
        $("#msg").append(innerHTML);
    };

    //关闭连接
    function closeWebSocket() {
        websocket.close();
        alert(websocket);
    }

//    当敲击回车键后，发送消息
    var keySend = function(){
        if (event.keyCode==13){
            send();
        }
    }


//    发送消息
    function send() {
        var fromID = "${NowCustom.id}";//当前用户，从session中取
        var toID = 5;//目标用户的ID
        var fromName = "${NowCustom.name}";//当前用户姓名
        var toName = "service";
        var msg = $("#text").val();//发送内容
        websocket.send(fromID+","+fromName+","+toID+","+toName+","+msg);
        $("#text").val("");
    }

//    获取聊天好友列表
    function queryFriends(){
        $.ajax({
            type:"GET",
            url:"/returnOrder/friends.do",
            dataType:"json",
            data:{id:1},
            success:function(msg){
                app.friendsList=msg.list;
            },error:function(){
                alert("拉取好友列表失败！");
            }
        })
    }

//    查询历史聊天记录
    function queryHistory(){
        $.ajax({
            type:"GET",
            url:"/returnOrder/history.do",
            dataType:"json",
            data:{adminId:5,customId:"${NowCustom.id}"},
            success:function(msg){
                app.talkList = msg.list;
                msg_end.scrollIntoView();//滚动到底部
            },error:function(){
                alert("错误");
            }
        })
    }

//    显示事故记录表
    function showAccident(){
        layer.open({
            type:2,
            title:'退款记录表',
            fix:'false',
            maxmin:true,
            shadeClose:true,
            area:['950px','600px'],
            content:'/backstage/LQ_accident.ftl',
            end:function(){

            }
        })
    }

//    新增退货记录
    function addAccident(){
        layer.open({
            type:2,
            title:'填写退货信息',
            fix:'false',
            maxmin:true,
            shadeClose:true,
            area:['400px','600px'],
            content:'/backstage/LQ_newaccident.ftl',
            end:function(){

            }
        })
    }

</script>
</body>

</html>